<template>
  <div class="indent">
    <header>
      订单管理
      <div class="search">
        <div class="select">
          状态:
          <select v-model="values" @change="area(values)">
            <option v-for="(item,index) in optionls" :key="index">{{item.text}}</option>
          </select>
        </div>
        &emsp;
        <p>
          搜索:
          <input v-model="value"  />
        </p>
        <button class="buton_one" @click="search(value)">查询</button>
      </div>
    </header>
    <main>
      <div class="table">
        <table border="1">
          <thead>
            <tr>
              <th>序号</th>
              <th>编号</th>
              <th>用户名</th>
              <th>手机号</th>
              <th>类型</th>
              <th>支付金额</th>
              <th>支付时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in list" :key="index">
              <td>{{item.id}}</td>
              <td>{{item.img}}</td>
              <td>{{item.name}}</td>
              <td>{{item.phone}}</td>
              <td>{{item.house}}</td>
              <td>{{item.price}}</td>
              <td>{{item.time}}</td>
              <td class="action">
                <span @click="del(item.id)">删除</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      seal: "状态",
      values: "",
      value:"",
      optionls: [
        { text: "状态", value: "状态" },
        { text: "二手房出租", value: "二手房出租" },
        { text: "有房出租", value: "有房出租" },
        { text: "我想买个房", value: "我想买个房" },
        { text: "我想租个房", value: "我想租个房" },
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //获取数据
    getList() {
      axios({
        url: "/api/lists",
        method: "post"
      }).then(res => {
        this.list = res.data.data;
      });
    },
    //按姓名搜索
    search(value) {
      axios({
        url: "/api/search",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        this.list = res.data.data;
      });
    },
    //筛选
    area(values){
      axios({
        url:"/api/indent",
        method:'post',
        data:{
          values:values
        }
      }).then(res=>{
        this.list=res.data.data
      })
    },
    //数据删除
    del(id){
      axios({
        url:'/api/del',
        method:'delete',
        data:{id:id}
      }).then(res=>{
        this.getList()
      })
    }
  }
};
</script>

<style scoped>
.search input {
  height: 30px;
}
.search button {
  margin-left: 10px;
  height: 30px;
  width: 80px;
}
.button_one {
  background: #888787;
  border: none;
}
.button_two {
  background: cornflowerblue;
  border: none;
}
.select {
  margin-left: 10px;
}
.select select {
  width: 200px;
  height: 30px;
}
.action span {
  margin-left: 10px;
}
.search {
  width: 100%;
  display: flex;
  margin-left: 10px;
  margin-top: 10px;
}
.table {
  width: 1300px;
  height: 500px;
  margin-left: 10px;
}
table {
  width: 100%;
  margin-top: 30px;
  border-collapse: collapse;
  border: 1px solid #cccccc;
  text-align: center;
}
table thead tr {
  background: #f8f8f8;
}
table thead tr th {
  height: 30px;
  background: #f8f8f8;
}
table tbody tr td {
  height: 30px;
}
</style>